<template>
  <div class="home">
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      @keypress.enter="selectMusic"
      @focus="isFocus"
    />
    <div v-if="isfocus">
      <span class="cancel" @click="cancel">取消</span>
      <div v-if="isSearch">
        <van-collapse v-model="activeName" accordion> </van-collapse>
        <div v-if="isRun" class="fixStyle">
          <div>
            <video
              class="video"
              id="video01"
              :src="musicUrl"
              @canplay="getTotal"
              @timeupdate="timeupdate"
              autoplay
            />
            <!-- 进度条 -->
            <van-slider
              v-model="currentTimeVal"
              :max="durationProgress"
              :show-tooltip="false"
              @change="getNewTime"
              active-color="#4CBFFB"
            >
              <template #button>
                <div class="custom-button">{{ currentTime }}</div>
              </template>
            </van-slider>
            <!-- 播放时间 -->
            <span class="time">{{ currentTime }} / {{ totalTime }}</span>
            <!-- 播放暂停按钮 -->
            <div>
              <img
                style="width: 25px; height: 25px; z-index: 99"
                :src="require('/src/assets/' + iconURlName + '.png')"
                alt=""
                @click="play()"
              />
            </div>
            <!-- 音量 -->
            <!-- <span
            ><van-slider
              class="volume"
              bar-height="4px"
              v-model="volume"
              @change="getNewVoice"
            />:{{ volume }}</span> -->
          </div>
        </div>
        <div v-else></div>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="加载完毕"
          @load="onLoad"
        >
          <van-cell
            @click="playMusic(item)"
            v-for="(item, index) in list"
            :key="index"
            :title="item.songname"
          />
        </van-list>
      </div>
      <div v-else>
        <h4>热搜：</h4>
        <span
          class="hot"
          v-for="(item, index) in hot"
          :key="index"
          @click="selectHot(item)"
          >{{ item.k }}</span
        >
      </div>
    </div>
    <div v-else>
      <HomeSwiper />
      <PlayList />
      <TalentShowPlaylist />
      <Category />
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HomeSwiper from "@/components/home/HomeSwiper.vue";
import PlayList from "@/components/home/PlayList.vue";
import TalentShowPlaylist from "@/components/home/TalentShowPlaylist.vue";
import Category from "@/components/home/Category.vue";
import axios from "axios";

export default {
  name: "Home",
  components: {
    HomeSwiper,
    PlayList,
    TalentShowPlaylist,
    Category,
  },
  data() {
    return {
      value: "",
      isfocus: false,
      isSearch: false,
      isRun: false,
      list: [],
      hot: [],
      musicUrl: "",
      loading: false,
      finished: false,
      activeName: "1",
      isPaused: true,
      iconURlName: "pause",
      currentTime: "00:00", //当前播放时间
      totalTime: "00:00", //总时长
      currentTimeVal: 0, // 进度条当前播放时间，必须是number类型
      durationProgress: 0, // 进度条的最大值，必须是number类型
      currentIndex: "", // 选中视频类型索引
      volume: 30,
    };
  },
  created() {
    this.getHot();
  },
  mounted() {
    //获取播放器元素
  },
  methods: {
    selectMusic() {
      axios
        .get("/api/search", { params: { key: this.value } })
        .then((res) => {
          console.log(res.data.data.list);
          this.list = res.data.data.list;
        })
        .catch((err) => {
          console.error(err);
        });

      this.isSearch = true;
    },
    getHot() {
      axios
        .get("/api/search/hot")
        .then((res) => {
          this.hot = res.data.data;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectHot(item) {
      this.value = item.k;
      this.selectMusic();
    },
    isFocus() {
      this.isfocus = true;
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 20; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 20) {
          this.finished = true;
        }
      }, 1000);
    },
    playMusic(item) {
      let id = item.songmid;
      axios
        .get("/jsososo/song/urls", {
          params: {
            id: id,
          },
        })
        .then((res) => {
          console.log(res.data.data[id]);
          console.log(id);
          this.musicUrl = res.data.data[id];
          this.isRun = true;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    cancel() {
      this.isfocus = false;
      this.value = "";
    },
    play() {
      //修改当前的播放状态
      var myVideo = document.getElementById("video01");
      this.isPaused = !this.isPaused;
      if (this.isPaused) {
        myVideo.play();
        this.iconURlName = "pause";
      } else {
        myVideo.pause();
        this.iconURlName = "running";
      }
    },
    timeupdate() {
      var myVideo = document.getElementById("video01");
      if (myVideo.currentTime == myVideo.duration) {
        this.isPaused = !this.isPaused;
        myVideo.pause();
        this.iconURlName = "running";
      }
      this.currentTime = this.timeFormat(myVideo.currentTime);
      this.currentTimeVal = myVideo.currentTime;
    },
    //获取总时长
    getTotal() {
      var myVideo = document.getElementById("video01");
      this.totalTime = this.timeFormat(myVideo.duration);
      this.durationProgress = myVideo.duration;
    },
    //时间格式化处理
    timeFormat(time) {
      let minute = Math.floor((time % 3600) / 60);
      let second = Math.floor(time % 60);
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      return `${minute}:${second}`;
    },
    // 音量控制
    getNewVoice(val) {
      var myVideo = document.getElementById("video01");
      this.volume = val;
      let newVc = val / 100; //h5规定,volume的值必须再0-1之间,比如0.5就是50%的音量,但是进度条的值为100,因此这里做个除法
      myVideo.volume = newVc; //赋值
    },
    // 进度条拖动时间
    getNewTime(val) {
      var myVideo = document.getElementById("video01");
      myVideo.currentTime = val;
    },
  },
};
</script>

<style scoped>
h4 {
  position: relative;
  right: 40%;
}
.cancel {
  position: absolute;
  top: 3%;
  right: 40px;
  border: 1px solid black;
  border-radius: 10px;
}
.hot {
  display: inline-block;
  border-radius: 5px;
  border: 1px solid beige;
  background-color: azure;
  margin: 5px;
}
.fixStyle {
  /* position: fixed; */
  width: 90%;
  margin: 0 auto;
  background-color: aliceblue;
}
/* .van-slider {
  width: 35%;
} */
/* 滑块颜色 */
.custom-button {
  width: 35px;
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  background-color: #4cbffb;
  border-radius: 5px;
}
.volume {
  width: 35%;
}
.time {
  display: inline-block;
  margin: 10px auto;
}
</style>